<template>
	<view class="container">
		<view class="login-box" v-if="isBlock">
			<view class="user-box">
				<view class="usericon">
					<u-icon name="account" size="30px" class="icon"></u-icon>
				</view>
				<view class="userinput"><input type="text" value="" placeholder="请输入账号" clearable v-model="user"
						@change="changeuser" /></view>
			</view>
			<view class="password-box">
				<view class="passwordicon">
					<u-icon name="lock" size="30px" class="icon"></u-icon>
				</view>
				<view class="passwordinput"><input type="text" value="" placeholder="请输入账号" clearable v-model="password"
						@change="changepassword" /></view>
			</view>
			<view class="loginbtn">
				<u-button type="warning" shape="circle" text="确定" @click="login"></u-button>
			</view>
			<view class="login-reg" @click="loginReg">还没有账号?点击注册</view>
		</view>
		<view class="register-box" v-else>
			<view class="user-box">
				<view class="usericon">
					<u-icon name="account" size="30px" class="icon"></u-icon>
				</view>
				<view class="userinput"><input type="text" placeholder="请输入账号" clearable v-model="reguser" /></view>
			</view>
			<view class="password-box">
				<view class="passwordicon">
					<u-icon name="lock" size="30px" class="icon"></u-icon>
				</view>
				<view class="passwordinput"><input type="text" placeholder="请输入密码" clearable v-model="regpass" /></view>
			</view>
			<view class="phone-box">
				<view class="passwordicon">
					<u-icon name="phone" size="30px" class="icon"></u-icon>
				</view>
				<view class="passwordinput"><input type="text" placeholder="手机号码" clearable v-model="phone" /></view>
			</view>
			<view class="verify-box">
				<view class="verifyicon">
					<u-icon name="hourglass" size="30px" class="icon"></u-icon>
				</view>
				<view class="verifyinput"><input type="text" placeholder="验证码" clearable v-model="verify" />
					<view class="getverify" @click="getverify">
						<text>{{tips}}</text>
					</view>
				</view>

			</view>
			<view class="registerbtn">
				<u-button type="warning" shape="circle" text="确定" @click="register"></u-button>
			</view>
			<view class="login-reg" @click="Reg">已有账号?点击登录</view>
		</view>
		
		<u-popup :show="show" mode="center" @close="close" :round="10">
			<view class="popuptext">{{ popupt }}</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: 'uzi', //登录用户val
				password: 'uzi', //登录密码val
				show: false,
				isBlock: true,
				reguser: '', //注册用户val
				regpass: '', //注册密码val
				phone: '', //注册手机val
				verify: '', //验证码val
				seconds: 10, //倒计时所需的秒数
				tips: '获取验证码', //验证码显示文字
				newverify:'',//随机生成验证码
				popupt: '密码或账号有误，请重新输入'
			};
		},
		methods: {
			//登录验证
			login() {
				if (this.user == '' || this.password == '') {
					this.show = true;
					this.popupt='输入框不能为空'
				} else {
					this.$post(this.API.auth, {
						username: this.user,
						password: this.password
					}).then(res => {
						if (res.data.errno == 700) {
							this.show = true;
							this.popupt='密码或账号有误，请重新输入'
						}else{
							console.log(res.data)
							uni.navigateBack({
								delta:1
							})
							this.$store.commit('mutationsState',res.data.data.token)
							this.$store.commit('mutationsuserInfo',res.data.data.userInfo)
							
						}
						
					});
				}
			},
			register() {
				let phonetest = /^1[3|4|5|6|7|8|9]\d{9}$/
				let verify = /^\d{4}$/
				if (this.reguser == '' || this.regpass == '' || this.phone == '' || this.verify == '') {
					this.show = true;
					this.popupt = '输入框不能为空'
				} else if (!phonetest.test(this.phone)) {
					this.show = true;
					this.popupt = '手机号错误,请输入正确手机号'
				} else if (!verify.test(this.verify)) {
					this.show = true;
					this.popupt = '验证码为4位数字'
				} else if(this.verify!=this.newverify){
					this.show = true;
					this.popupt = '验证码错误'
				}
				else {
					uni.setNavigationBarTitle({
						title:'登录页面'
					})
					this.isBlock = true;
					this.$post(this.API.register, {
						username: this.reguser,
						password: this.regpass,
						mobile:this.phone,
						code:this.verify
					}).then(res => {
						if (res.data.errno == 700) {
							this.show = true;
						}
						
						console.log(res)
					});
					this.reguser='',
					this.regpass='',
					this.phone='',
					this.verify=''
				}
			},
			//点击屏蔽罩关闭提示
			close() {
				this.show = false;
				// console.log('close');
			},
			changeuser(e) {
				if (e.detail.value.length < 3) {
					console.log('小于3');
				}
			},
			changepassword(e) {
			},
			//控制登录或祖册显示
			loginReg() {
				this.isBlock = false;
				uni.setNavigationBarTitle({
					title:'注册页面'
				})
			},
			Reg(){
				uni.setNavigationBarTitle({
					title:'登录页面'
				})
				this.isBlock=true
			},
			//验证码
			getverify() {
				this.popupt = '正在获取验证码'
				this.show = true;
				this.newverify = Math.ceil(Math.random()*10000);
				setTimeout(() => {	
						this.popupt = '验证码是'+this.newverify;
						setTimeout(()=>{
							this.show = false
						},1000)
				}, 2000)
				let timer = setInterval(() => {
					this.tips = '倒计时'+this.seconds--+'秒';
					if (this.seconds < -1) {
						clearInterval(timer);
						this.tips = '重新获取'
					}
			},
			1000)

	}
	

	},
	mounted() {
		this.login()
	}
	};
</script>

<style lang="scss" scoped>
	@import 'uview-ui/theme.scss';

	.container {
		height: 100vh;
		position: relative;

		.login-box,
		.register-box {
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translate(-50%, -50%);

			.user-box,
			.password-box,
			.phone-box,
			.verify-box {
				width: 80vw;
				position: relative;

				&::before,
				&::after {
					display: table;
					clear: both;
					content: '';
					padding: 10rpx;
				}

				.usericon,
				.passwordicon,
				.verifyicon {
					float: left;
					width: 10vw;

					.icon {
						color: #e0bb76;
					}
				}

				.userinput,
				.passwordinput,
				.verifyinput {
					float: left;
					border-bottom: 1px solid #ff0004;
					width: 70vw;
				}

				.getverify {
					position: absolute;
					right: 0px;
					top: 10px;
					font-size: 25rpx;
					z-index: 99;
				}
			}

			.registerbtn {
				button {
					border: 0;
					box-shadow: none;
					// animation: shake 100ms 3;
				}
			}

			.login-reg {
				font-size: 25rpx;
				margin-top: 10rpx;
			}


			@keyframes shake {
				.loginbtn {
					transform: translateY(0px);
				}

				50% {
					transform: translateY(1px);
				}

				to {
					transform: translateY(0px);
				}
			}
		}
	}

	.popuptext {
		color: #f0ad4e;
		text-align: center;
		width: 60vw;
		line-height: 10vh;
	}
</style>
